var FilterTableColumn = function () {
  var template = /* html */ `
    <el-table-column :sortable="sortable" :label="label" :prop="prop" :min-width="minWidth" :column-key="columnKey" :width="width" :fixed="fixed"
      :resizable="resizable" :align="align" :header-align="headerAlign" :class-name="className" :label-class-name="labelClassName"
      :filters="filters" :filter-method="filterMethod">
      <slot slot-scope="scope" :row="scope.row">
        {{getTableValue(scope.row)}}
      </slot>
    </el-table-column>
  `;

  return {
    props: {
      sortable: [Boolean, String],
      label: String,
      prop: String,
      minWidth: String,
      columnKey: String,
      width: String,
      fixed: String,
      resizable: Boolean,
      align: String,
      headerAlign: String,
      className: String,
      labelClassName: String,
      filterField: String
    },

    inject: {
      tableFun: {
        default: null
      }
    },

    computed: {
      table: function () {
        var tableFun = this.tableFun;
        if (tableFun === null) {
          return null;
        }
        return tableFun();
      },
      tableData: function () {
        var table = this.table;
        if (table === null) {
          return [];
        }
        return table.getFilteredData();
      }
    },

    data: function () {
      return {
        filters: []
      };
    },

    mounted: function () {
      var self = this;
      this.table.$watch('data',function(){
        self.setFilters();
      });
      this.table.$on('filter-change', function () {
        self.setFilters();
      });
      this.setFilters();
    },

    methods: {
      setFilters: function () {
        var tableData = this.tableData;
        var field = this.filterField || this.prop;
        var filters = [];
        for (var i = 0; i < tableData.length; i++) {
          var data = tableData[i];
          var value = _.get(data, field);
          var checkValue = value;
          if (typeof checkValue === 'string') {
            checkValue = checkValue.trim();
          }
          if (!SysUtil.isEmpty(checkValue)) {
            filters.push({
              text: value,
              value: value
            });
          }
        }

        filters = _.uniqBy(filters, 'value');
        if (filters.length === 0) {
          this.filters = [];
          return;
        }
        this.filters = filters;
      },

      filterMethod:function(value, row){
        var field = this.filterField || this.prop;
        return row[field] === value;
      },

      getTableValue: function (obj) {
        var prop = this.prop;
        return _.get(obj, prop);
      }
    },

    template: template
  };
}();
